<script setup lang="ts">
import { getSubjectList } from '@/api/subject';
import type { Result } from '@/utils/request';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';

const onShow = ref(false);
const subjectList = ref([]);

onMounted(() => {
    getSubjectList().then((res) => {
        const {msg,data} = res as Result;
        subjectList.value = data;
        ElMessage({
            message: msg,
            type: 'success',
        })
        console.log(res);
    })
})
</script>

<template>
    <div class="container">
        <div class="header">
            <el-button @click="onShow = true" type="primary">添加</el-button>
        </div>
        <el-table :data="subjectList" style="width: 100%" stripe border>
            <el-table-column prop="name" label="题目集名" />
            <el-table-column prop="url" label="图片" />
            <el-table-column prop="creator.nickname" label="创建者" />
            <el-table-column prop="created" label="创建时间" />
            <el-table-column prop="updated" label="更新时间" />
        </el-table>
    </div>
</template>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 1%;
    display: flex;
    .header {
        margin-bottom: 1%;
    }
}

</style>